<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>动画</title>
    <style type="text/css">
      /* ************************************************************** */
      html:root {
        --box-width: 350px;
        --box-height: fit-content;
      }
      .demo-box dl.demo-box-item-expend {
        width: clamp(800px, 70%, 1200px);
      }
      /* ************************************************************** */
      /* ************************************************************** */
      .box {
        height: 100px;
        color: #fff;
        background-color: red;
      }
      #case5-btn,
      #case3-btn,
      #case8-btn,
      #case9-btn,
      #case11-btn {
        width: 100px;
        height: 40px;
      }
      .case1 {
        transition: background-color 1s 0.3s;
      }
      .case1:hover,
      .case2:hover {
        background-color: blue;
      }
      .case2 {
        transition: background-color 1s -0.3s;
      }
      .case3 {
        opacity: 0;
        visibility: hidden;
        transition: visibility 0.5s, opacity.5s;
      }
      .case3.active {
        visibility: visible;
        opacity: 1;
        /* 重置状态 */
        transition-property: opacity;
      }
      /* ************************************************************** */
      /* ************************************************************** */
    </style>
  </head>
  <body>
    <!-- ------------------------------------------------------------->
    <!-- ------------------------------------------------------------->
    <header>
      <a href="./14-3d变幻.html">上一篇</a>
      <a href="./16-动画-animation.html">下一篇</a>
    </header>
    <!-- ------------------------------------------------------------->
    <!-- ------------------------------------------------------------->
    <section class="demo-box">
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
      <dl>
        <dt>transition</dt>
        <dd>
          <h4>基本使用</h4>
          <div class="box case1">
            内容
          </div>
          <pre><code class="language-scss">
transition: background-color 1s 0.3s;</code></pre>
          1、双数字时：都为正，则动画持续时间在前，delay在后；若有负值，则顺序无关紧要，负的为delay
          <br />
          2、delay为负数时，可以加快、省略部分动画效果
          <div class="box case2">
            transition: background-color 1s -0.3s;
          </div>
        </dd>
        <dd>
          <h4>与visibility联动</h4>
          <button id="case3-btn">添加active</button>
          <div class="box case3" id="case3">
            早期版本浏览器对于突然增加的类里动画失效（hover除外），直接突然显示。为保守起见，需要在动画触发结束状态处重置transition-property
          </div>
        </dd>
      </dl>
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
      <dl>
        <dt>贝塞尔曲线</dt>
        <dd>
          <h4>值</h4>
          ease | ease-in | ease-out | ease-in-out | cubic-bezier(&lt;number&gt;,
          &lt;number&gt;, &lt;number&gt;, &lt;number&gt;)
          <br />
          默认值为ease，先加速再减速
          <br />
          详情：
          <a href="https://cubic-bezier.com/#.17,.67,.83,.67" target="_blank">
            cubic-bezier.com
          </a>
        </dd>
      </dl>
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
    </section>
    <!-- ------------------------------------------------------------->
    <!-- ------------------------------------------------------------->
    <link rel="stylesheet" href="./0-模板.css" />
    <link
      rel="stylesheet"
      href="../../Module/hightlight/styles/hybrid.min.css"
    />
    <script src="../../Module/hightlight/highlight.min.js"></script>
    <script>
      hljs.highlightAll()
      case3()
      function case3() {
        const btn = document.getElementById('case3-btn')
        console.log(btn)
        btn.addEventListener('click', function () {
          const caseDom = document.getElementById('case3')
          if (caseDom.className == 'box case3 active') {
            caseDom.className = 'box case3'
            btn.innerHTML = '添加active'
          } else {
            caseDom.className = 'box case3 active'
            btn.innerHTML = '去除active'
          }
        })
      }
    </script>
  </body>
</html>
